import styled from "@emotion/styled";
import React, { useEffect, useLayoutEffect, useRef, useState } from "react";

const FlipPageTwo = () => {

    const [dataList, setDataList] = useState<any[]>([0, 1, 2])
    const wrapperRef = useRef<HTMLDivElement>(null)
    const lastRectRef = useRef<Map<HTMLElement, DOMRect>>(new Map())

    const getRandomInt = (min:number, max:number) => {
        return Math.floor(Math.random() * (max - min + 1) + min)
    }
    const shuffle = (arr:any[]) => {
        let ret = arr.slice()
        for(let i=0;i<ret.length; i++){
            let j = getRandomInt(0, i)
            let t = ret[i]
            ret[i] = ret[j]
            ret[j] = t
        }
        return ret
    }

    const handleShuffle = () => {
        setDataList(shuffle)
    }

    const add = () => {
        setDataList(prev => [prev.length, ...prev])
    }
    // add all childen to lastRef
    function createChildrenElementMap(wrapper:HTMLElement|null){
        if(!wrapper) return new Map()
        const childNodes = Array.from(wrapper.childNodes) as HTMLElement[]
        const result = new Map(childNodes.map(node => [node, node.getBoundingClientRect()]))
        return result
    }

    useEffect(()=>{
        const currentRectMap = createChildrenElementMap(wrapperRef.current)
        lastRectRef.current = currentRectMap
        console.log('useEffect', currentRectMap)
    }, [dataList])

    useLayoutEffect(()=>{
        // get latest status
        const currentRectMap = createChildrenElementMap(wrapperRef.current)
        console.log('useLayoutEffect', currentRectMap)
        // compare last status
        lastRectRef.current.forEach((prevNode, node) => {
            const currentRect = currentRectMap.get(node)
            const invert = {
                left: prevNode.left - currentRect?.left,
                top: prevNode.top - currentRect?.top
            }
            const keyframes = [
                {
                    transform: `translate(${invert.left}px, ${invert.top}px)`
                },
                {transform: 'translate(0, 0)'}
            ]
            node.animate(keyframes, {
                duration: 1000, 
                // easing:'cubic-bezier(0.25, 0.8, 0.25, 1)'
                easing:'cubic-bezier(0,0,0.32,1)'
            })
            // lastRectRef.current = currentRectMap
        })
    }, [dataList])


    return (
        <Wrap>
            <div className="control">
                <button onClick={add}>增加</button>
                <button onClick={handleShuffle}>乱序</button>
            </div>
            <div className="list" ref={wrapperRef}>
                {
                    dataList.map(v=> <div className="item" key={v}>{v}</div>)
                }
            </div>
        </Wrap>
    )
}

const Wrap = styled.div`
    .control{
        display: flex;
        gap: 10px;
        padding: 12px;
    }
    .list{
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        width: 800px;
        
    }
    .item{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        border: 1px solid #fff;
        background-color: #eee;
        box-sizing: border-box;
    }
`

export default FlipPageTwo